<template>
    <div class="wrapper">
        <div class="table-wrapper">
               
            <el-descriptions title='用户信息' direction='vertical'  :column="2" :border='true'>
                
                <el-descriptions-item v-for="(val, index) in Object.keys(user).slice(0, 5)" :key="index" :label="keyvalue[index]" label-class-name="my-label" content-class-name="my-content">
                    {{ user[val] }}
                </el-descriptions-item>
                
            </el-descriptions>
        </div>

        <div class="button-wrapper">
            <el-button type="primary" @click="passSelected()">通过所选</el-button>
            <el-button type="primary" @click="rejectSelected()">拒绝所选</el-button>
            <el-button type="primary" @click="rejectAccount()">拒绝账户</el-button>
            <el-button type="primary" @click="passSelected()">搁置</el-button>
            <el-button type="primary" @click="next()">下一个任务</el-button>
        </div>

        <div class="form-wrapper">
            <el-table size="small" :data="application" highlight-current-row  border @selection-change="handleSelectionChange" >
                <el-table-column align="center" type="selection" width="60" >
                    <template slot-scope="{row}">
                        <el-checkbox v-model="row.selected"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column sortable prop="title" label="标题" >
                </el-table-column>
                <el-table-column sortable prop="des" label="描述" >
                </el-table-column>
                <el-table-column sortable prop="image" label="图片" >
                    <template slot-scope="{ row }">
                        <img :src="row.image" class="image"/>
                    </template>
                </el-table-column>
                

                <el-table-column align="center" label="操作" >
                    <template slot-scope="scope">
                        <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                        
                        <el-button size="mini" type="primary" @click="pass(scope.$index)">通过</el-button>
                        <el-button size="mini" type="primary" @click="reject(scope.$index)">拒绝</el-button>
                    </template>
                </el-table-column>
            
                

            </el-table>

            <el-table :data="userList" class="table2" highlight-current-row  border>
                <el-table-column sortable prop="url" label="落地页" width="550px">
                    <template slot-scope="{ row }">
                        <iframe :src="row.url" height="350px" width="500px"></iframe>
                    </template>
                </el-table-column>
                
                <el-table-column align="center" label="操作" max-width="300px" >
                    <template slot-scope="scope">
                        <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                        
                        <el-button size="mini" type="primary" @click="pass(scope.$index)">通过</el-button>
                        <el-button size="mini" type="primary" @click="reject(scope.$index)">拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
        </div>

    </div>
    
</template>

<script>
import {getUserById} from '@/api'
import {reqUserList, deleteUser,searchUser2} from '@/api'
import axios from 'axios'; 
export default {
    data() {
        const path = this.$route.path;
        const pathArr = path.split('/');
        return {
            selected: [],
            listData: [],
            listData2: [],
            userList : [],
            application: [],
            length: pathArr.length,
            userId: pathArr[pathArr.length - 1],
            user: {},
            url: '',
            keyvalue: [
                 "用户名称",
                "产品线",
                "领域",
            "开始时间",
               "结束时间"
            ]
        }
    },
    created() {
        this.getData()
        this.getUser(this.userId);
        
        
        
        
    },
    methods: {
        async getUser(userId) {
            
            let result = await getUserById(userId);
            console.log(result);
            this.user = result.data;
            this.application = this.user.application
            this.userList = [this.user];
        },

        
        async getData() {
            let result = await reqUserList();
            if(result.code == 200) {
            this.listData = result.data;
            this.listData2 = result.data.slice(6, 1)
            }
            this.total = this.listData.length
            const path = this.$route.path;
        const pathArr = path.split('/');
        this. userId = pathArr[pathArr.length - 1]
            
      },
      next() {
        if(Number(this.userId) + 1 < this.listData.length) {
            this.$router.push(`/examinepage/${Number(this.userId) + 1}`)
            
        } else {
            alert("任务已做完")
        }
        
        this.getData();
        this.getUser(this.userId);
        
      },

      handleSelectionChange(selection) {
        this.selected.push(selection)
      },
      
      passSelected() {
        
        if(this.selected.length == 0) {
            alert("请勾选")
        } else {
            axios.post('/mock/application/passselected', ).then(response => {
                    alert("已通过")
				}).catch(error => {
					console.error(error);
				});
        }
      },

      rejectSelected() {
        if(this.selected.length == 0) {
            alert("请勾选")
        } else {
            axios.post('/mock/application/rejectselected', ).then(response => {
                    alert("已拒绝")
				}).catch(error => {
					console.error(error);
				});
        }
      },

      pass() {
        axios.post('/mock/application/passselected', {
					
				}).then(response => {
                    alert("已通过")
				}).catch(error => {
					console.error(error);
				});
      },

      reject() {
        axios.post('/mock/application/rejectselected', {
					
				}).then(response => {
                    alert("已拒绝")
				}).catch(error => {
					console.error(error);
				});
      },
      
      rejectAccount() {
        axios.post('/mock/application/rejectselected', {
					
				}).then(response => {
                    alert("已拒绝")
				}).catch(error => {
					console.error(error);
				});
      }

    }
}
</script>

<style>
    .table-wrapper {
        padding: 20px;
    }
    .button-wrapper {
        display: flex;
        padding: 20px;
        justify-content: center;
    }
    .button-wrapper {
        padding: 20px;
    }
    .form-wrapper {
        padding: 20px;
        display: flex;
    }
    .table2 {
        width: 40%;
    }
 
    .image {
        height: 100px;
        width: 150px;
    }

    .iframe-body-sty{position: relative;overflow: hidden;height:600px;width: 1200px;background-color: red;}
	.iframe-body-sty>#iframe-shrink{position: absolute;transform:scale(0.55);left: -400px;top: -170px;}


</style>